import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
import Title from '@/components/pages/titleTop'
import Count from '../count'
import batchImg from '@/assert/images/logistics/batch.png'
interface ICount {
    text: string,
    num: string,
    unit: string
}

const Total = styled.div`
        padding-top: 2rem;
        display:flex;
        font-size: 1.4rem;
        width:21.1rem;
        height: 11.8rem;
        color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border:1px solid #0A4F89;
        background:rgba(6,31,79,.5);
        .top,.bottom{
            flex: 1 1 50%;
            display:flex; 
        }
        .bottom{
            color: #F36964;
            /* background:rgba(8,50,107,.5); */
            text-align:center;
            display:flex;
            flex-direction: row; 
            img{
                align-content: flex-end;
                width: 3.3rem;
                height: 3.5rem; 
                position: relative;
                top:50%; 
                transform: translate( 0,-50%);
            }
        }

        span{
          position: relative;
          top:-1rem;
          font-size: 3.2rem;
          margin: 1rem;
          color:#00F6FF;
        } 
`

const Content: FC<Partial< ICount>&{img?:string}> = function (props) { 
    return (
        <Total> 
            <div className='top'>{props.text}</div>
            <div className='bottom'><img src={props.img?props.img:batchImg} /><Count num={props.num!} unit={props.unit!} /></div>
        </Total>
    )
}

export default Content
